<template>
    <div class="ac">
          <i class="el-icon-arrow-down" @click="change"></i>
          <p class="a1">搜索</p>
          <i class="el-icon-search , a3"></i>
          <input type="text" placeholder="请输入关键字搜索" class="a2">
              <i class="a5" @click="change">取消</i>
            <p class="a6">搜索历史</p>

           <ul class="a7">
               <li>张怀中老师</li>
               <li>体型课程</li>
               <li>只是就是力量</li>
           </ul>
           <ul class="a8">
               <li>销售</li>
               <li>初级技术进阶</li>
               <li>测试</li>
               <li>java工程师</li>
           </ul>
           <div><p class="b2">热门搜索</p></div>
        
    </div>
</template>

<script>
    export default {
           methods:{
            change(){
                this.$router.go(-1);
            },
        },
    }
    
</script>

<style scoped>
  .el-icon-arrow-down {
  transform: rotate(90deg);
  /* margin-top: 1vh; */
  margin-left: 2vw;
  position: absolute;
  /* top: 200px; */
  font-size: 3vw;
  left: 0vw;
  height: 5vh;
  color: black;
  font-weight: bold;
}
.a1{
    text-align: center;
    font-size: 3vh;
    margin-top: 2vw;
}
.a2{
    width: 76vw;
    height: 4vh;
    font-size: 2vh;
    text-indent: 8vw;
    border-radius: 3vw;
    margin-left: 5vw;
    margin-top: 4vh;
    outline: none;
    background: rgb(235, 231, 231);
}
.ac{
    position: relative;
}
.a3{
    width: 4vw;
    height: 5vh;
    font-size: 3vh;
    margin-left: 3vw;
    position: absolute;
    left: 4vw;
    margin-top: 4.5vh;
}
.a5{
    font-size: 2vh;
    margin-left: 5vw;
    color:blue;
}
.a6{
    font-size: 2vh;
    margin-left: 5vw;
    color: #ccc;
    margin-top: 5vh;
}
.a7{
    display: flex;
    justify-content:space-around;
    margin-top: 3vh;
}
.a7 li{
    width: 28vw;
    height: 3vh;
    line-height: 3vh;
    font-size: 4vw;
    text-align: center;
    background: rgb(230, 227, 227);
}
.a8{
    display: flex;
    justify-content:space-around;
    margin-top: 3vh;
}
.a8 li{
    width: 24vw;
    height: 3vh;
    line-height: 3vh;
    text-align: center;
    font-size: 4vw;
    background: rgb(230, 227, 227);
}
.b2{
    font-size: 2vh;
    margin-left: 5vw;
    color: #ccc;
    margin-top: 5vh;
}
</style>